<template>
  <div class="info_stock_nav" :style="{ height: height + 'px' }">
    <ul class="f-cb">
      <li
        v-for="(item, index) in stock_list"
        :key="index"
        :class="key_stock == index ? 'on' : ''"
        @click="stockClick(index, item)"
      >
        <span>{{ item.title }}</span>
      </li>
      <li
        class="tool"
        @click="ShowTool($event)"
        :class="ShowToolIs ? 'on' : ''"
      >
        {{ $t('info.info_line.57klzuagi240') }}
      </li>
      <li
        @click="ShowTechnical($event)"
        v-if="itemStock.type == 2"
        :class="ShowTechnicalIs ? 'on' : ''"
      >
        {{ $t("info.info_line.56hz7r3sjzc0") }}
      </li>
      <!-- <li v-if="itemStock.type == 2">
        <el-select v-model="techs1" :placeholder="$t('info.info_line.57klzuagka80')" @change="addTec1">
          <el-option
            v-for="item in tecList1"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </li>
      <li v-if="itemStock.type == 2">
        <el-select
          v-model="techs2"
          multiple
          collapse-tags
          :placeholder="$t('info.info_line.57klzuagkqs0')"
          @visible-change="addTec2($event)"
          @remove-tag="removeTec"
          :multiple-limit="5"
        >
          <el-option
            v-for="item in tecList2"
            :key="item.name"
            :label="item.name"
            :value="item.name"
          >
          </el-option>
        </el-select>
      </li> -->
    </ul>
    <div class="toolMenu">
      <ul class="toolUl" v-if="ShowToolIs">
        <li class="toolLi" v-for="(item, index) in lineList" :key="index" @click="addTool(item,index)">
          <!-- <span>{{item.name}}</span> -->
          <img class="tool_img" :src="toolActive == index ? item.imgBule : item.img" :title="item.name">
        </li>
        <li><span>|</span></li>
        <!-- 删除 -->
        <li class="toolLi" @click="canlePaint">
          <img class="tool_img" src="@/assets/img/img_del.png" :title="$t('info.info_line.57klzuagl1w0')">
        </li>
        <!-- 截图 -->
        <li class="toolLi" @click="convertPicture">
          <img class="tool_img" src="@/assets/img/img_zhi.png" :title="$t('info.info_line.57klzuaglcg0')">
        </li>
      </ul>
      <ul class="toolUl" v-if="ShowTechnicalIs && itemStock.type == 2">
        <li class="toolLi" :class="studyActive == index ? 'on' : ''" v-for="(item, index) in tecList1" :key="item.name" @click="addTec1(item, index)">
          <span>{{item.name}}</span>
        </li>
        <li><span>|</span></li>
        <li class="toolLi" :class="item.flag ? 'on' : ''" v-for="(item, index) in tecList2" :key="item.name" @click="addTec2(item, index)">
          <span>{{item.name}}</span>
        </li>
        <li><span>|</span></li>
        <li class="toolLi" :class="fuQuanActive == index ? 'on' : ''" v-for="(item, index) in fuquanList" :key="index" @click="addFuQUAN(item,index)"><span>{{item.name}}</span></li>
      </ul>
    </div>
    <div class="echartHeight">
      <my-echarts
        :typeStock="{ ...itemStock, ...list }"
        :echartHeight="echartHeight"
        :echartWidth="echartWidth"
        :ShowTechnicalIs="ShowTechnicalIs"
        :RefreshIndex="RefreshIndex"
        @drawEnd="drawEnd"
        ref="kLine"
      ></my-echarts>
    </div>
  </div>
</template>
<script>
import myEcharts from "@/components/info/info_echart.vue";
import { get_details } from "@/assets/js/API/market.js";
export default {
  components: { myEcharts },
  props: ["infoCode", "height", "showis", "RefreshIndex"],
  data() {
    return {
      stock_list: [
        { title: this.$i18n.t("m.toDay"), coded: "day", type: 1 }, // 分时
        { title: this.$i18n.t("m.Fday"), coded: "5day", type: 1 }, // 5日
        { title: this.$i18n.t("m.day"), coded: "day", type: 2 }, // 日
        { title: this.$i18n.t("m.week"), coded: "week", type: 2 }, // 周
        { title: this.$i18n.t("m.month"), coded: "month", type: 2 }, // 月
        { title: this.$i18n.t("m.Omin"), coded: "1min", type: 2 }, // 1分钟
        { title: this.$i18n.t("m.Fmin"), coded: "5min", type: 2 },
        { title: this.$i18n.t("m.OFmin"), coded: "15min", type: 2 },
        { title: this.$i18n.t("m.SZmin"), coded: "30min", type: 2 },
        { title: this.$i18n.t("m.SOmin"), coded: "60min", type: 2 },
      ],
      key_stock: 0,
      itemStock: { title: this.$i18n.t("m.toDay"), coded: "day", type: 1 },
      list: {},
      currentKLine: {}, // 当前K线图对象
      echartWidth: null,
      echartHeight: null,
      timeClick: null,
      ShowTechnicalIs: true, // 展示主图副图指标
      ShowToolIs: true, // 展示绘图工具
      tecList1: [
        // 主图指标
        {
          name: "MA",
          option: [5, 10, 30, 60],
          flag: false, // 是否开启指标
        },
        {
          name: "BOLL",
          option: [20],
          flag: false, // 是否开启指标
        },
        {
          name: "EMA",
          option: [6, 12, 20],
          flag: false, // 是否开启指标
        },
        {
          name: "SAR",
          option: [2, 2, 20],
          flag: false, // 是否开启指标
        },
      ],
      tecList2: [
        // 副图指标
        {
          name: "VOL",
          option: [5, 10, 20],
          flag: true, // 是否开启指标
        },
        {
          name: "MACD",
          option: [12, 26, 9],
          flag: false, // 是否开启指标
        },
        {
          name: "KDJ",
          option: [9, 3, 3],
          flag: false, // 是否开启指标
        },
        {
          name: "CR",
          option: [26, 10, 20, 40, 60],
          flag: false, // 是否开启指标
        },
        {
          name: "DMA",
          option: [10, 50, 10],
          flag: false, // 是否开启指标
        },
        {
          name: "EMV",
          option: [14, 9],
          flag: false, // 是否开启指标
        },
        {
          name: "RSI",
          option: [6, 12, 24],
          flag: false, // 是否开启指标
        },
      ],
      fuquanList: [
        // 复权
        {
          name: this.$t('info.info_line.57klzuagmk40'),
          value: 0,
          flag: true, // 是否开启指标
        },
        {
          name: this.$t('info.info_line.57klzuaglng0'),
          value: 1,
          flag: false, // 是否开启指标
        },
        {
          name: this.$t('info.info_line.57klzuagm280'),
          value: 2,
          flag: false, // 是否开启指标
        },
      ],
      studyActive: 99, // 当前主图指标
      fuQuanActive: 2, // 复权指标
      toolActive: 99, // 当前画线工具
      techs2: [], // 副图参数多选
      lineList: [
        {
          name: this.$t('info.info_line.57klzuagmuw0'),
          value: "rayLine",
          img: require("@/assets/img/img_xie.png"),
          imgBule: require("@/assets/img/img_xie1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagn440'),
          value: "horizontalRayLine",
          img: require("@/assets/img/img_she.png"),
          imgBule: require("@/assets/img/img_she1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagndc0'),
          value: "verticalRayLine",
          img: require("@/assets/img/img_va.png"),
          imgBule: require("@/assets/img/img_va1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagnq00'),
          value: "parallelStraightLine",
          img: require("@/assets/img/img_ping.png"),
          imgBule: require("@/assets/img/img_ping1.png")
        },
        {
          name: this.$t('info.info_line.57klzuago380'),
          value: "segment",
          img: require("@/assets/img/img_xianduan.png"),
          imgBule: require("@/assets/img/img_xianduan1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagong0'),
          value: "priceLine",
          img: require("@/assets/img/img_price.png"),
          imgBule: require("@/assets/img/img_price1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagoy40'),
          value: "priceChannelLine",
          img: require("@/assets/img/img_TD.png"),
          imgBule: require("@/assets/img/img_TD1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagp5c0'),
          value: "fibonacciLine",
          img: require("@/assets/img/img_fei.png"),
          imgBule: require("@/assets/img/img_fei1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagpcg0'),
          value: "rect",
          img: require("@/assets/img/img_JX.png"),
          imgBule: require("@/assets/img/img_JX1.png")
        },
        {
          name: this.$t('info.info_line.57klzuagpjk0'),
          value: "circle",
          img: require("@/assets/img/img_quan.png"),
          imgBule: require("@/assets/img/img_quan1.png")
        }
      ]
    };
  },
  computed: {},
  mounted() {
    var _this = this;
    this.$nextTick(function () {
      this.getWidthHeight();
      this.getDetail();
    });
    // $(window).resize(function(){
    //     console.log($(".info_stock_nav").width(),$(window).width(),'resizegetwidth')
    //     _this.getWidthHeight();
    // })
  },
  methods: {
    // 展示技术指标
    ShowTechnical(event) {
      if ($(event.target).hasClass("on")) {
        $(event.target).removeClass("on");
        this.ShowTechnicalIs = false;
      } else {
        $(event.target).addClass("on");
        this.ShowTechnicalIs = true;
      }
    },
    setVal() {
      var _this = this;
      _this.timeClick = setInterval(() => {
        _this.getDetail();
      }, 4000);
    },
    getWidthHeight() {
      this.echartHeight = $(".info_stock_nav").height() - 30;
      this.echartWidth = $(".info_stock_nav").width();
    },
    stockClick(index, item) {
      this.key_stock = index;
      if (index != 10) {
        this.itemStock = item;
      }
      this.initStudy();
    },
    // 初始化指标参数
    initStudy() {
      this.studyActive = 99;
      this.tecList2 = [
        // 副图指标
        {
          name: "VOL",
          option: [5, 10, 20],
          flag: true, // 是否开启指标
        },
        {
          name: "MACD",
          option: [12, 26, 9],
          flag: false, // 是否开启指标
        },
        {
          name: "KDJ",
          option: [9, 3, 3],
          flag: false, // 是否开启指标
        },
        {
          name: "CR",
          option: [26, 10, 20, 40, 60],
          flag: false, // 是否开启指标
        },
        {
          name: "DMA",
          option: [10, 50, 10],
          flag: false, // 是否开启指标
        },
        {
          name: "EMV",
          option: [14, 9],
          flag: false, // 是否开启指标
        },
        {
          name: "RSI",
          option: [6, 12, 24],
          flag: false, // 是否开启指标
        },
      ];
      this.fuQuanActive = 1;
    },
    async getDetail() {
      if(this.infoCode == null) return;
      const res = await get_details(this.infoCode)
      if (res.code != "1") return this.$message.error(res.msg);
      this.list = res.data.detail;
      this.list.id = res.data.detail.warnId;
      this.initStudy();
    },
    // 添加主图技术指标
    addTec1(item,index) {
      // 获取主图存在的技术指标
      this.$refs.kLine.addSupple(item);
      this.studyActive = index;
      this.tecList1[index].flag = !this.tecList1[index].flag;
    },
    // 添加副图技术指标
    addTec2(item, index) {
      this.$refs.kLine.addTec(item);
      this.tecList2[index].flag = !this.tecList2[index].flag;
    },
    // 添加复权
    addFuQUAN(item, index) {
      this.$refs.kLine.setKTime(item.value);
      this.fuQuanActive = index;
    },
    // 展示绘图工具栏
    ShowTool() {
      this.ShowToolIs = !this.ShowToolIs;
    },
    // 添加工具图标
    addTool(val,index) {
      if(index == this.toolActive) this.toolActive = 99;
      else this.toolActive = index
      this.$refs.kLine.addLine(val.value,index);
    },
    // 绘图完成
    drawEnd(index) {
      this.toolActive = 99;
    },
    // 取消绘图订阅
    canlePaint() {
      this.$refs.kLine.deleteTool(this.itemStock.type);
    },
    // K线截屏
    convertPicture() {
      this.$refs.kLine.getPictureUrl();
    }
  },
  beforeDestroy() {
    clearInterval(this.timeClick); //关闭
  },
  watch: {
    infoCode(val) {
      if (val !== "") {
        this.getDetail();
      }
    },
    showis(val) {
      if (val !== "") {
        this.getWidthHeight();
      }
    },
    RefreshIndex(val) {
      if (val !== "") {
        this.getDetail();
      }
    },
    height: {
      immediate: true,
      handler(val) {
        if (val != "") {
          this.echartHeight = val - 30;
          // if(this.ShowToolIs == true)
          // this.echartHeight = this.echartHeight - 30;
          // this.getWidthHeight();
        }
      },
    },
    // ShowToolIs: {
    //   immediate: true,
    //   handler(val) {
    //     if (val == true) {
    //       this.echartHeight = this.echartHeight - 30;
    //       console.log(val,this.echartHeight,"工具")
    //     }else
    //       this.echartHeight = this.echartHeight + 30;
    //   },
    // }
  },
};
</script>
<style lang="less">
@import "~@/assets/less/select.less";
.info_stock_nav {
  width: 100%;
  ul {
    padding: 0 20px;
    border-bottom: 1px solid @LightBorderLine;
    li {
      float: left;
      font-size: 12px;
      line-height: 30px;
      margin-right: 15px;
      color: @fbSix;
      cursor: pointer;
      .el-select {
        .el-select__tags {
          .el-tag.el-tag--info {
            background-color: transparent;
            border: none;
            .el-select__tags-text {
              color: @fbSix;
            }
          }
        }
        .el-input__inner {
          background-color: transparent;
          border: none;
          height: 30px;
          font-size: 12px;
          color: @fbSix;
          line-height: 30px;
          padding: 0 15px 0 0;
          width: 150px;
        }
        .el-input__icon {
          line-height: 30px;
        }
      }
      input::-webkit-input-placeholder {
        color: @fbSix;
      }
      input::-moz-input-placeholder {
        color: @fbSix;
      }
      input::-ms-input-placeholder {
        color: @fbSix;
      }
    }
    li.on {
      color: @hoverColor;
    }
  }
    .toolMenu {
      height: 60px;
      position: absolute;
      top: 30px;
      z-index: 8;
      display: flex;
      flex-direction: column;
      // padding-left: 20px;
      width: 100%;
      // border-bottom: 1px solid #222538;
      .toolUl {
        width: 100%;
        padding: 0 20px;
        &:last-child {
          border: none;
        }
        .toolLi {
          list-style-type: none;
          .tool_img {
            height: 20px;
          }
        }
      }
    }
  .echartHeight {
  }
}
</style>